<template>
  <h2>富文本编辑器示例</h2>
  <t-editor
    v-model="content1"
    :content-style="content1Style"
  />

  <t-editor
    class="t-editor2"
    v-model="content2"
    :content-style="content2Style"
  />
</template>

<script>
  import { defineComponent } from 'vue'

  const TEST_CONTENT = `
          <figure class="table" style="width:472.52pt;">
            <table>
                <tbody>
                    <tr>
                        <td style="background-color:#F2F2F2;border-color:#8EA9DB;border-width:.5pt;height:30.00pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;width:157.50pt;">
                            Apr
                        </td>
                        <td style="background-color:#F2F2F2;border-color:#8EA9DB;border-width:.5pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;width:157.50pt;">
                            May
                        </td>
                        <td style="background-color:#F2F2F2;border-color:#8EA9DB;border-width:.5pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;width:157.50pt;">
                            Jun
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color:#C6EFCE;height:23.00pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                            $87,533
                        </td>
                        <td style="padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                            $43,659
                        </td>
                        <td style="background-color:#C6EFCE;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                            $56,980
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color:#C6EFCE;height:23.00pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                            $51,425
                        </td>
                        <td style="padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                            $23,441
                        </td>
                        <td style="padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                            $30,975
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color:#FFC7CE;height:23.00pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                            $3,231
                        </td>
                        <td style="padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                            $39,901
                        </td>
                        <td style="background-color:#C6EFCE;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                            $63,947
                        </td>
                    </tr>
                </tbody>
            </table>
        </figure>
        `

  export default defineComponent({
    data() {
      return {
        content1: '',
        content1Style: {
          minHeight: '100px',
          maxHeight: '300px'
        },

        content2: '',
        content2Style: {
          height: '300px'
        }
      }
    },
    created() {
      this.loadContent()
    },
    methods: {
      loadContent() {
        setTimeout(() => {
          this.content2 = TEST_CONTENT
        }, 500)
      }
    }
  })
</script>

<style lang="less">
  .t-editor2 {
    margin-top: 40px;
  }
</style>
